<script setup lang="ts">
import type { RenderContent } from '@arco-design/web-vue/es/_utils/types'
import type { DnsNsListItem } from '@/apis/model/dns'
import { Message } from '@arco-design/web-vue'
import { getDnsAuthorityNameserversApi } from '@/apis/modules/dns'
import { commonTableProps } from '@/utils/table'
import { deleteDnsAuthorityNameserverApi } from '../../../apis/modules/dns'
import EditDialog from './components/EditorDialog.vue'
import EditRemarkDialog from './components/EditRemarkDialog.vue'
import useConfig from './useConfig'

const { tableColumns } = useConfig()
const route = useRoute()
const router = useRouter()

const queryParams = ref({ hostname: '' })

const { loading, pagination, data, run } = useListRequest(
  getDnsAuthorityNameserversApi,
  {
    params: queryParams,
    immediate: true,
  },
)
const {
  visible: editDialogVisible,
  open: openEditDialog,
  data: editDialogData,
} = usePopup()
const {
  visible: editorRemarkDialogVisible,
  open: openEditorRemarkDialog,
  data: editorRemarkDialogData,
} = usePopup()

// 删除地址
function handleDelete(record: DnsNsListItem) {
  ModalHelper.error({
    title: '删除地址',
    content: h('div', null, [
      '确定要删除 “',
      h('span', { class: 'text-[#FA5566]' }, `${record.hostname || '-'}`),
      '” 地址吗？',
    ]) as unknown as RenderContent,
    okText: '删除',
    width: 480,
    closable: false,
    onOk: async () => {
      await deleteDnsAuthorityNameserverApi({ id: record.id })
      await run()
      Message.success('删除成功')
    },
  })
}

const { createSortChange } = useTable(run, data)
const onSorterChange = createSortChange(queryParams)

function shouldShowTooltip(remark: string) {
  // 判断 remark 是否存在
  if (!remark)
    return false
  // 字符数大于50时返回true，否则返回false
  return remark.length > 50 // 先按字符数快速判断
}
function handleReload(flag: boolean) {
  if (flag)
    return run()
  router.replace({ name: 'DnsNSAddress' })
  run()
}
onMounted(() => {
  if (route.query.type === 'open') {
    openEditDialog()
  }
})
</script>

<template>
  <main-container
    v-model:pagination="pagination"
    :loading="loading"
    @run="run"
  >
    <template #header>
      <div class="flex space-x-4">
        <a-button
          type="primary"
          @click="openEditDialog()"
        >
          新建地址
        </a-button>
        <a-input-search
          v-model="queryParams.hostname"
          placeholder="请输入地址搜索"
          class="!w-58"
          allow-clear
          @clear="run()"
          @search="run()"
          @keydown.enter="run()"
        />
      </div>
    </template>

    <a-table
      v-bind="commonTableProps"
      :columns="tableColumns"
      :data="data"
      @sorter-change="onSorterChange"
    >
      <template #remark="{ record }">
        <div class="flex">
          <a-tooltip
            :content="record.remark || '-'"
            position="top"
            :disabled="!shouldShowTooltip(record.remark)"
          >
            <span class="overflow-hidden text-ellipsis whitespace-nowrap">
              {{ record.remark || '-' }}
            </span>
          </a-tooltip>
          <div class="ml-1 min-w-4">
            <i-icons-edit
              class="table-icon"
              size="16px"
              @click="openEditorRemarkDialog(record)"
            />
          </div>
        </div>
      </template>
      <template #actions="{ record }">
        <a-link
          :hoverable="false"
          @click="openEditDialog(record)"
        >
          <i-icons-edit size="16px" />
        </a-link>
        <a-link
          :hoverable="false"
          status="danger"
          @click="handleDelete(record)"
        >
          <i-icons-delete size="16px" />
        </a-link>
      </template>
    </a-table>
  </main-container>
  <edit-dialog
    v-model:visible="editDialogVisible"
    :record="editDialogData"
    @reload="handleReload"
  />
  <edit-remark-dialog
    v-model:visible="editorRemarkDialogVisible"
    :record="editorRemarkDialogData"
    @reload="run"
  />
</template>

<style scoped>
:deep(.arco-table-tr) {
  .table-icon {
    opacity: 0;
    color: var(--color-text-7);
    cursor: pointer;
  }

  &:hover {
    .table-copy-text {
      @apply text-primary;
    }

    .table-icon {
      opacity: 1;
      color: #00a65b;
    }
  }
}
</style>
